<template>
	<view>
		<VideoBox>
			<template #content>
				<view class="outBox">
					<u-navbar leftText="我的历史拼卡" leftIconColor="#fff" :autoBack="true" bgColor="rgba(0, 0, 0, 0.6)">
						<view class="left-slot" slot="left">
							<u-icon name="arrow-left" color="#fff"></u-icon>
							<text>{{ '我的历史拼卡' }}</text>
						</view>
					</u-navbar>
					<view class="content">
						<view class="selectTime">
							<ep-select v-model="selectTime" :options="options" @change="changeTime"></ep-select>
						</view>
						<view class="items">
							<view class="item" v-for="item in dataList" :style="{
									backgroundImage:`url(${getImgUrl('/mine/cardCombination/img5.png')})`
									,
								  }" @click="handleDetails(item)">
								<view class="left">
									<view class="top">
										<view class="num">
											<text>卡台号</text>
										</view>
										<view class="name">
											<text>{{item.counterNo}}</text>
										</view>
									</view>
									<view class="bottom">
										<div class="tip">
											<text>{{formatDateTime(item.createTime)}}</text>
										</div>
										<view class="tip">
											<text>已参与</text>
											<text>{{item.num || 0}}人</text>
										</view>
									</view>
								</view>
								<view class="right">
									<view class="state" :class="item.shareAuditStatus == 3 ? 'state2' : ''">
										<text>{{item.shareAuditStatus == 1 ? '拼卡中' : '已结束'}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
		</VideoBox>
	</view>
</template>

<script>
	import VideoBox from "@/components/VideoBox/index.vue";
	import {
		getImgUrl,
		getImgUrlLocal,
		getWXStatusHeight
	} from "@/utils";
	import {
		getMyJoinedOrderShareApi
	} from "@/api/api";

	export default {
		components: {
			VideoBox
		},
		onLoad() {
			let obj = getWXStatusHeight()
			this.menuHeight = obj.menuHeight
			this.generatePastMonths()
			this.getDataList()
		},
		data() {
			return {
				menuHeight: 0,
				dataList: [],
				selectTime: '',
				options: [],
				isDone: false,
				total: 0,
				pageParams: {
					pageSize: 10,
					pageNum: 1,
				}
			};
		},
		async onReachBottom() {
			if (this.total <= this.dataList.length) {
				this.isDone = true
			}
			if (this.isDone) return

			this.pageParams.pageNum += 1
			this.getDataList()
		},
		methods: {
			getImgUrl,
			getImgUrlLocal,
			changeTime(e) {
				this.selectTime = e
				this.dataList = []
				this.getDataList()
			},
			formatDateTime(dateString) {
				const date = new Date(dateString);
				return `${date.getFullYear()}-${
			    String(date.getMonth() + 1).padStart(2, '0')}-${
			    String(date.getDate()).padStart(2, '0')} ${
			    String(date.getHours()).padStart(2, '0')}:${
			    String(date.getMinutes()).padStart(2, '0')}:${
			    String(date.getSeconds()).padStart(2, '0')}`;
			},
			generatePastMonths() {
				const currentDate = new Date();
				const currentYear = currentDate.getFullYear();
				const currentMonth = currentDate.getMonth() + 1; // 月份从 0 开始，所以要加 1

				const months = [];

				for (let month = currentMonth; month >= 1; month--) {
					// 确保月份是两位数格式
					const formattedMonth = month.toString().padStart(2, '0');
					months.push(`${currentYear}-${formattedMonth}`);
				}

				this.options = months.map(item => {
					return {
						value: item,
						label: item
					}
				})
			},
			async getDataList() {
				if (this.selectTime) {
					this.pageParams.month = this.selectTime
				} else {
					console.log(this.options, "this.options");
					this.pageParams.month = this.options[0].value
				}
				const res = await getMyJoinedOrderShareApi(this.pageParams)
				if (res.code == 200) {
					this.dataList.push(...res.rows)
					this.total = res.total
				}
			},
			handleDetails(item) {
				if (item.shareAuditStatus === 3) return
				this.getnav('/pages/mine/cardCombination/details?id=' + item.id)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.items {
		.item {
			padding: 48rpx 40rpx;
			margin-bottom: 16rpx;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				.top {
					display: flex;

					.name {
						font-weight: 500;
						font-size: 36rpx;
						color: #FFFFFF;
					}

					.num {
						width: 100rpx;
						height: 40rpx;
						background: #0FC6C2;
						border-radius: 14rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 20rpx;
						margin-bottom: 24rpx;

						text {
							font-weight: 500;
							font-size: 24rpx;
							color: #FFFFFF;
							line-height: 24rpx;
						}
					}
				}

				.bottom {
					.tip {
						text {
							&:nth-child(1) {
								font-weight: 500;
								font-size: 28rpx;
								color: #86909C;
								margin-right: 20rpx;
							}

							&:nth-child(2) {
								font-weight: 500;
								font-size: 28rpx;
								color: #fff;
							}
						}
					}
				}
			}

			.right {
				.state {
					width: 100rpx;
					height: 40rpx;
					border-radius: 14rpx;
					background: rgba(255, 96, 72, .3);
					border: 2rpx solid #FF6048;
					display: flex;
					align-content: center;
					justify-content: center;

					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #FF6048;
					}
				}

				.state2 {
					width: 100rpx;
					height: 40rpx;
					background: rgba(134, 144, 156, 0.3);
					border-radius: 14rpx;
					border: 2rpx solid #86909C;
					display: flex;
					align-content: center;
					justify-content: center;

					text {
						font-weight: 500;
						font-size: 24rpx;
						color: #86909C;
					}
				}
			}
		}
	}

	.content {
		padding: 32rpx;
	}

	.left-slot {
		color: #fff;
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			margin-right: 30rpx;
		}
	}
</style>